'use client'

import Avatar from "@/components/Avatar"
import { useRouter, useParams } from "next/navigation"
import { fillValueHelper } from "@/utils/common"
import { useRef, useEffect, useState } from "react"
import { Tooltip, Tag } from 'antd'

export default function DisputeRelation ({ name, list }) {

    const router = useRouter()
    const relationRef = useRef()
    const [width, setWidth] = useState(() => (0))
    const params = useParams()

    useEffect(() => {
        if (relationRef.current) {
            setWidth(() => (relationRef.current.offsetWidth - 48))
        }
    }, [])

    const handleClickCount = (path) => {
        router.push(`/association-graph/${params?.id}?name=${name}&tab=graph&litigant=${path}`)
    }

    return (
        <div className="text-sm px-4">
            <div className="p-1 border-b border-gray-200 flex mb-6">
                <div className="w-16 pl-2">
                    <span>
                        名称
                    </span>
                </div>
                <div className="flex-1 pl-8">
                    <span>
                        纠纷关系
                    </span>
                </div>
                <div className="flex-[0.6_0.6_0%]">
                    <span>
                        纠纷总数
                    </span>
                </div>
                <div className="flex-[0.7_0.7_0%]">
                    <span>
                        {`与${name}的纠纷次数`}
                    </span>
                </div>
            </div>
            {(list ?? []).map(({
                tag,
                name,
                url,
                avatarUrl,
                disputeRelation,
                disputeCount,
                relationCount,
                id,
            }, index) => {
                return (
                    <div className="flex items-center my-1" key={index}>
                        <Avatar size={40} name={name} url={url} avatarUrl={avatarUrl}/>
                        <div className="flex-1 pl-12 pb-5" ref={relationRef} >
                            <Tooltip title={fillValueHelper(disputeRelation)} color='#34b7b9' placement="topLeft">
                                <span className=" line-clamp-1" style={{ width: width }}>{`${fillValueHelper(disputeRelation)}`}</span>
                            </Tooltip>
                        </div>
                        <div className="flex-[0.6_0.6_0%] pb-5 pl-16">
                            {/* <span className="block">
                                {fillValueHelper(disputeCount)}
                            </span> */}
                            <Tag bordered={false} color="#f3f4f6" style={{ color: '#303133' }}>
                                {fillValueHelper(disputeCount)}
                            </Tag>
                        </div>
                        <div 
                            className="flex-[0.7_0.7_0%] pb-5 pl-16 hover:text-primary cursor-pointer rounded-full"
                            onClick={() => (handleClickCount(name))}
                        >
                            {/* <span className="block">
                                {fillValueHelper(relationCount)}
                            </span> */}
                            <Tag bordered={false} color="#f3f4f6" style={{ color: '#303133' }}>
                                {fillValueHelper(relationCount)}
                            </Tag>
                        </div>
                    </div>
                )
            })}
        </div>
    )
}